/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-08-26 19:44:14
 * @LastEditors: lcz
 * @LastEditTime: 2022-08-30 10:12:04
 */
import { useEffect, useState, useRef, useMemo, useCallback } from 'react'
import { useDebounce } from 'ahooks'
import Spreadsheet from 'x-data-spreadsheet'
import 'x-data-spreadsheet/dist/xspreadsheet.css'
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn'
import stylesConfig from './styles'
import { uuid } from '@webchuanzhou96/lcz-utils'
Spreadsheet.locale('zh-cn', zhCN)

const ExcelCom = () => {
  const sheetEl = useRef(null)
  const sheetCache = useRef<any>(null)
  // const [sheet, setSheet] = useState<any>(null)
  let celldataLocal = localStorage.getItem('name')
  const [state, setState] = useState<object[]>(celldataLocal ? JSON.parse(celldataLocal) : [])
  const debouncedState = useDebounce(state, { wait: 300 })

  const [read, setRead] = useState(false)

  // 绑定监听事件
  // useEffect(() => {
  //   sheet &&
  //     sheet.on('cell-selected', function (cell: any, ri: any, ci: any) {
  //       // console.log(cell, ri, ci, '32')
  //       // to do ...
  //     })
  // }, [sheet])

  // 数据存储
  useEffect(() => {
    console.log('update:data', debouncedState)
    if (debouncedState.length > 0) {
      let value = JSON.stringify(debouncedState)
      console.log(value,2211)
      value && localStorage.setItem('name', value)
    }
  }, [debouncedState])

  // 配置缓存
  const sheetConfig = useMemo(() => {
    const element: any = sheetEl.current
    return {
      id: uuid(),
      mode: read ? ('read' as 'read') : ('edit' as 'edit'), // 模式切换 只读 编辑
      showToolbar: !read, //工具栏的显示状态
      showGrid: !read, // 内容区域的网格显示
      showContextmenu: !read, // 右键菜单
      showBottomBar: true, //底部工具栏的显示状态
      view: {
        height: () => document.documentElement.clientHeight || (element && element.clientHeight),
        width: () => document.documentElement.clientWidth || (element && element.clientWidth),
      },
      row: { len: 10, height: 25 },
      col: {
        len: 10,
        width: 100,
        indexWidth: 60,
        minWidth: 60,
      },
      style: stylesConfig,
    }
  }, [])

  // 按照底部工具栏的显示状态显示
  // const setStateValue = useCallback((data: any) => {
  //   if (sheetCache.current) {
  //     console.log(sheetCache.current.getData(), 'aaaa')
  //   }
  //   setState(pre => {
  //     let isCludes = pre.map((i: any) => i.name).includes(data.name)
  //     if (isCludes) {
  //       return pre.map((i: any) => {
  //         if (i.name == data.name) {
  //           i = data
  //         }
  //         return i
  //       })
  //     } else {
  //       return [...pre, data]
  //     }
  //   })
  // }, [])

  useEffect(() => {
    let celldataLocal = localStorage.getItem('name')
    if (sheetEl.current) {
      let s = new Spreadsheet((sheetEl as any).current, sheetConfig)
        .loadData(celldataLocal ? JSON.parse(celldataLocal) : state)
        .change(_ => {
          let dataArr = sheetCache.current.getData()
          console.log(dataArr,222)
          setState(dataArr)
        })
      sheetCache.current = s
      // setSheet(s)
    }

    return () => {
      if ((sheetEl as any).current.innerHTML) {
        ;(sheetEl as any).current.innerHTML = ''
      }
    }
  }, [])

  useEffect(() => {
    if (sheetCache.current) {
      console.log(sheetCache.current.getData(), 22211)
    }
  }, [sheetCache])

  const save = () => {
    // let value = JSON.stringify(state)
    // localStorage.setItem('name', value)

    console.log(sheetCache.current.addSheet())
  }

  return (
    <>
      <div id='ss' ref={sheetEl}></div>
      <div onClick={save}>操作</div>
    </>
  )
}
export default ExcelCom
